<template>
    <div id="myapp">
    <tree-grid
        :items='data'
        :columns='columns'
        @on-row-click='rowClick'
        @on-selection-change='selectionClick'
        @on-sort-change='sortClick'
    ></tree-grid>
    </div>
</template>
<script>
    import TreeGrid from './TreeGrid'
    export default {
        name:"expandTable",
        data() {
            return {
                columns: [ {
                    title: 'PO号',
                    key: 'code',
                    sortable: true,
                    width: '150',
                }, {
                    title: 'PO名称',
                    key: 'name',
                    width: '150',
                }, {
                    title: '版本',
                    key: 'version',
                    width: '150',
                }, {
                    title: '时间',
                    key: 'date',
                    width: '150',
                }, {
                    title: '健康度',
                    key: 'health',
                    width: '150',
                },{
                    title: '指标A',
                    key: 'remark',
                    width: '150',
                },{
                    title: '操作',
                    type: 'action',
                    actions: [{
                        type: 'primary',
                        text: '详情'
                    }, {
                        type: 'error',
                        text: '删除'
                    }],
                    width: '150',
                }],
                data: [{
                    id: '1',
                    code: '201801023351',
                    name: '网络安全',
                    version: 'P4',
                    date:'2017-10-25',
                    remark: '1.0',
                    _checked: true
                }, {
                    id: '2',
                    code: '201801023352',
                    name: '网络安全',
                    version: 'P3',
                    date:'2017-10-25',
                    remark: '2.1',
                    children: [{
                        id: '01',
                        code: '',
                        name: '服务A',
                        version: 'P1',
                        date:'2017-10-25',
                        remark: '0.75',
                        children:[{
                            id: '003',
                            code: '',
                            name: '微服务A',
                            version: 'P2',
                            date:'2017-10-25',
                            remark: '0.9'
                        }]
                    }, {
                        id: '02',
                        code: '',
                        name: '服务B',
                        version: 'P5',
                        date:'2017-10-25',
                        remark: '1',
                    }]
                }, {
                    id: '3',
                    code: '201801023353',
                    name: '测试数据3',
                    version: 'P2',
                    date:'2017-10-25',
                    remark: '1.1'
                }, {
                    id: '4',
                    code: '201801023354',
                    name: '测试数据4',
                    version: 'P4',
                    date:'2017-10-25',
                    remark: '1.0'
                }]
            }
        },
        components: {
            TreeGrid
        },
        methods: {
            rowClick(data, index, event) {
                console.log('当前行数据:' + data)
                console.log('点击行号:' + index)
                console.log('点击事件:' + event)
            },
            selectionClick(arr) {
                console.log('选中数据id数组:' + arr)
            },
            sortClick(key, type) {
                console.log('排序字段:' + key)
                console.log('排序规则:' + type)
            }
        }
    }
</script>
<style scoped>
    /*#myapp{*/
        /*width: 600px;*/
    /*}*/

</style>
